<meta charset="UTF-8">
<body>
    <div class="xuetiao" style="width: 200px;height: 30px; border-radius: 5px; border: 1px solid black; box-sizing: border-box;">
        <div class="blood" style="width: 200px; height: 30px;border-radius: 5px; background-color: red;"></div>
    </div>

<button>点击生成星星</button>
<button>一键清空</button>
</body>
<script>

    var t = setInterval(function createstar(){
        var imgObj = document.createElement('img')
        imgObj.src = './star.gif'
        var nowwidth = Math.floor(Math.random()*(60-20+1)+50)
        imgObj.style.width = nowwidth+'px'
        var maxLeft = (window.innerWidth ||document.documentElement.clientWidth) - nowwidth
        var maxTop = (window.innerHeight ||document.documentElement.clientHeight) - nowwidth
        imgObj.style.position = 'absolute'
        imgObj.style.left = Math.floor(Math.random()*(maxLeft-0+1)+0) +'px'
        imgObj.style.top = Math.floor(Math.random()*(maxTop-0+1)+0) + 'px'
        document.body.appendChild(imgObj)

        
    },2000)
    
    var btnObj = document.querySelector('button:nth-of-type(1)')
    btnObj.onclick = function(){
        var imgObj = document.createElement('img')
        imgObj.src = './star.gif'
        var nowwidth = Math.floor(Math.random()*(60-20+1)+50)
        imgObj.style.width = nowwidth+'px'
        var maxLeft = (window.innerWidth ||document.documentElement.clientWidth) - nowwidth
        var maxTop = (window.innerHeight ||document.documentElement.clientHeight) - nowwidth
        imgObj.style.position = 'absolute'
        imgObj.style.left = Math.floor(Math.random()*(maxLeft-0+1)+0) +'px'
        imgObj.style.top = Math.floor(Math.random()*(maxTop-0+1)+0) + 'px'
        document.body.appendChild(imgObj)
    }

    var btnObj1 = document.querySelector('button:nth-of-type(2)')
    btnObj1.onclick = function(evt){
        var e = evt || window.event
        var target = e.target || e.srcElement
        
        if(target.nodeName === 'BUTTON'){
            var imgObj = document.querySelectorAll('img')
            imgObj.forEach(function(item){
                item.style.display = 'none'
            })
            
        }
    
    }
    document.body.onclick = function(evt){
        var e = evt || window.event
        var target = e.target || e.srcElement
            if(target.nodeName === 'IMG'){
                this.removeChild(target)
            }
            var blood = parseInt(document.querySelector('.blood').style.width)
            if(blood + 1 !==200){
                document.querySelector('.blood').style.width = blood + 1 + 'px'
            }
        
    }
    setInterval(function(){
        var blood = parseInt(document.querySelector('.blood').style.width)
        document.querySelector('.blood').style.width = blood - 1 + 'px'
    },2000)

    
</script>